<template>
  <div class="bg-color-default font-Regular" style="min-height: 100vh">
    <Header ref="headerRef" :selectedIndex="3" @tabIndexChange=""></Header>
    <StudyHeader :courseId="data.courseId" :examInfo="data.examInfo" :orderItemId="data.orderItemId"
                 @getCourseConfig="getCourseConfig"></StudyHeader>
    <div class="container tw-pt-35 flex">
      <study-list v-model="currentLearn" :LearnNavigateArr="data.LearnNavigateArr"
                  @changeLearn="changeLearn"></study-list>
      <div :class="currentLearn == 4? '' : 'tw-p-32 bg-color-white tw-pt-0'" class="tw-flex-1 tw-ml-32 border-box ">
        <div v-show="currentLearn != 4" style="min-height: 800px">
          <div class="tw-mb-20 font-x tw-font-medium  tw-text-[#04ADDB] study-title tw-h-61">
            <div class="flex-middle" style="border-bottom: 4px solid #04ADDB;height: 100%;width: fit-content;">
              {{ data.LearnNavigateArr[currentLearn].name }}
            </div>
          </div>
          <curriculum v-if="currentLearn==0||currentLearn==2"
                      :getData="{
                      sourceType: data.sourceType,
                      courseId:data.courseId,
                      orderItemId:data.orderItemId,
               }" :dataArr="data.ScheduleDetail" :is-question="currentLearn==0?false:true"
                      @goQuestion="goQuestion" @goStudyVideo="goStudyVideo"></curriculum>
          <PractiseRecord v-show="currentLearn == 1||currentLearn==3" :recordList="data.recordList"></PractiseRecord>
        </div>
        <div v-show="currentLearn == 4" class="width100">
          <Report :courseId="data.courseId" :orderItemId="data.orderItemId"></Report>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import Header from "@/views/component/header.vue";
import schedule from "@/assets/images/study/schedule.png";
import scheduleActive from "@/assets/images/study/schedule-active.png";
import question from "@/assets/images/study/question.png";
import questionActive from "@/assets/images/study/question-active.png";
import practiseRecord from "@/assets/images/study/practise-record.png";
import paper from "@/assets/images/study/paper.png";
import paperActive from "@/assets/images/study/paper-active.png";
import practiseRecordActive from "@/assets/images/study/practise-record-avtive.png";
import report from "@/assets/images/study/report.png";
import reportActive from "@/assets/images/study/report-active.png";
import Curriculum from "@/views/component/course-curriculum.vue";
import studyList from "@/views/component/study-right-menu.vue";
import {doExerciseExercise, lessonStructure} from "@/api/study.js";
import {useRoute, useRouter} from 'vue-router';
import StudyHeader from './component/study-header.vue'
import {configIndex} from '../../api/course.js'
import Report from './component/report.vue'
import PractiseRecord from './component/practise-record.vue'
import {listExerciseRecord} from '../../api/study.js'

const router = useRouter();
const route = useRoute();
let currentLearn = ref(0);
let data = reactive({
  ScheduleDetail: [],
  recordList: [],
  examInfo: {},
  orderItemId: 0,
  courseId: 0,
  courseTypeId: null,
  sourceType: 1,
  LearnNavigateArr: [{
    name: "课程表",
    image: schedule,
    imageActive: scheduleActive,
  },
    {
      name: "刷题记录",
      image: paper,
      imageActive: paperActive,
    },
    {
      name: "题集",
      image: question,
      imageActive: questionActive,
    },
    {
      name: "练习记录",
      image: practiseRecord,
      imageActive: practiseRecordActive,
    },
    {
      name: "学习报告",
      image: report,
      imageActive: reportActive,
    },]
})
const changeLearn = (index) => {
  console.log(index)
  currentLearn.value = index;
  if (index == 2) {
    data.sourceType = index + 1
    getNavData()
  } else if (index == 0) {
    data.sourceType = 1
    getNavData()
  } else if (index == 1) {
    getRecordList()
  } else if (index == 3 ) {
    getRecordList()
  }
};
// 根据左侧导航栏获取数据
const getNavData = () => {
  let dataAll = {
    "orderItemId": data.orderItemId, //子订单id
    "courseId": data.courseId, //课程id
    "sourceType": data.sourceType, //来源类型1-课程表 2-题集 3-视频播放时课程表
    // "structId": 1727684522011 //根据id过滤出需要展示的结构,默认不传,看视频等情况需要传递
  }
  lessonStructure(dataAll, (res) => {
    data.ScheduleDetail = res.data
  })
}

function getCourseConfig(province) {
  configIndex({courseType: route.query.courseTypeId, addSource: 1, provinceId: province ? province.id : ''}, (res) => {
    data.examInfo = res.data
  })
}

function getRecordList() {
  listExerciseRecord({courseId: route.query.courseId, orderItemId: route.query.orderItemId, type: currentLearn.value==1?2:1}, (res) => {
    data.recordList = res.data
  })
}

onMounted(() => {
  data.orderItemId = route.query.orderItemId //子订单id
  data.courseId = route.query.courseId //课程iddata.
  getCourseConfig()
  getNavData()
  getRecordList()
})
const goStudyVideo = (item) => {
   router.push({
    name: 'StudyVideoPlay',
    query: {
      orderItemId: data.orderItemId,
      courseId: data.courseId,
      structId: item.parentId,
      itItem: item.id
    }
  });
}
// 前往健陪圈
const goQuestion = (item) => {
  let allData = {
    courseId: data.courseId,
    orderItemId: data.orderItemId,
    bankId: item.type == 'question'? item.typeAssoId : item.questionId,
  }
  doExerciseExercise(allData, res => {
    window.open(res.data)
  })
}
</script>

<style lang="scss" scoped>
.study-title {
  border-bottom: 1px solid #eee;
}
</style>
